<template>
  <div>
    <div class="head_box">
      <div class="head_text">我的优惠券</div>
      <ul class="tab_hint">
        <!-- :data-index="item.index" -->
        <li
          v-for="(item, index) in hintList"
          :key="index"
          :class="item.isActive ? 'active' : ''"
          @click="changeBtn(index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="discountBox">
      <div class="con" v-show="cur == 0">
        <!-- 未使用优惠券 -->
        <div class="img_box">
          <!-- <div class="discounts_box"> -->
          <span class="conform">￥</span>
          <span class="num">30</span>
          <div class="discounts_text">
            <span class="discounts_text_one">购买套餐立减优惠券</span
            ><span class="discounts_text_two">2020.10.22-2020.11.12</span>
          </div>

          <span class="discounts_btn">立即使用</span>
          <p class="city">
            <span class="letter">T</span><span>限深圳市使用</span>
          </p>
          <span class="deadline">剩余两天过期</span>
        </div>
        <!-- 未使用优惠券 END -->

        <!-- 已生效 -->
        <div class="used_img_box">
          <span class="used_conform">￥</span>
          <span class="used_num">50</span>
          <div class="used_discounts_text">
            <span class="used_discounts_text_one">购买套餐立减优惠券</span
            ><span class="used_discounts_text_two">2020.10.22-2020.11.12</span>
          </div>

          <span class="used_discounts_btn">已过期</span>
          <p class="used_city">
            <span class="used_letter">T</span><span>限深圳市使用</span>
          </p>
          <span class="used_deadline">剩余两天过期</span>
        </div>
        <!-- 已生效 END -->
      </div>
      <div class="con" v-show="cur == 1">
        <!-- 未使用优惠券 -->
        <div class="img_box">
          <!-- <div class="discounts_box"> -->
          <span class="conform">￥</span>
          <span class="num">0</span>
          <div class="discounts_text">
            <span class="discounts_text_one">购买套餐立减优惠券</span
            ><span class="discounts_text_two">2020.10.22-2020.11.12</span>
          </div>

          <span class="discounts_btn">立即使用</span>
          <p class="city">
            <span class="letter">T</span><span>限深圳市使用</span>
          </p>
          <span class="deadline">剩余两天过期</span>
        </div>
        <!-- 未使用优惠券 END -->
      </div>
      <div class="con" v-show="cur == 2">
        <!-- 未使用优惠券 -->
        <div class="img_box">
          <!-- <div class="discounts_box"> -->
          <span class="conform">￥</span>
          <span class="num">100</span>
          <div class="discounts_text">
            <span class="discounts_text_one">购买套餐立减优惠券</span
            ><span class="discounts_text_two">2020.10.22-2020.11.12</span>
          </div>

          <span class="discounts_btn">立即使用</span>
          <p class="city">
            <span class="letter">T</span><span>限深圳市使用</span>
          </p>
          <span class="deadline">剩余两天过期</span>
        </div>
        <!-- 未使用优惠券 END -->
      </div>
      <div class="con" v-show="cur == 3">
        <div class="used_img_box">
          <span class="used_conform">￥</span>
          <span class="used_num">50</span>
          <div class="used_discounts_text">
            <span class="used_discounts_text_one">购买套餐立减优惠券</span
            ><span class="used_discounts_text_two">2020.10.22-2020.11.12</span>
          </div>

          <span class="used_discounts_btn">已过期</span>
          <p class="used_city">
            <span class="used_letter">T</span><span>限深圳市使用</span>
          </p>
          <span class="used_deadline">剩余两天过期</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      cur: 0,
      hintList: [
        { name: "全部", isActive: true, cur: 0 },
        { name: "未使用", isActive: false, cur: 1 },
        { name: "已使用", isActive: false, cur: 2 },
        { name: "已过期", isActive: false, cur: 3 },
      ],
    };
  },
  mounted() {},
  methods: {
    changeBtn(index) {
      // this.isActive = this.isActive;
      // let myindex = index;
      this.cur = index;
      console.log(this.cur);

      if (this.cur =index) {
        this.isActive=!this.isActive

      }

      // let num = this.cur;
      // this.hintList.filter((e) => {

      // });
    },
  },

  //  filterlist () {
  //               let num=this.size;
  //               return this.list.filter(function (number) {
  //                   return number.id < num
  //               })
  //           }
};
</script>

<style scoped>
/* body{
  text-align: center;
} */

.head_box {
  background-color: white;
  box-shadow: 2px 2px 10px #e2e2e2;
}
/* .discounts_box{
  margin-left: 10px;
  width: 250px;
} */
.head_text {
  font-size: 20px;
  font-weight: 700;
  background: white;
  margin-left: 20px;
  /* margin-top: 20px; */
}

.tab_hint {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: none;
  font-weight: normal;
  font-size: 15px;
  color: #999;
}
.tab_hint li {
  width: 92.7px;
}

.active {
  border-bottom: 3px solid rgb(253, 197, 0);
}

.discountBox {
  /* width: 100%; */
  /* text-align: center; */
  /* margin: 0px auto; */
  display: flex;
  justify-content: center;
}

/* 未使用优惠券 */
.img_box {
  text-align: center;
  background-image: url("../images/hongse.png");
  background-repeat: no-repeat;
  background-size: 320px;
  width: 320px;
  height: 100px;
  box-shadow: 2px 2px 10px #e2e2e2;
  /* margin-left: 28px; */
  margin-top: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
}
.conform {
  font-size: 22px;
  font-weight: 700;
  margin-left: 15px;
  margin-bottom: 30px;
}
.num {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 32px;
}
.discounts_text {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  position: relative;
  margin-bottom: 40px;
  margin-left: 5px;
}

.discounts_text_one {
  /* position: absolute; */
  /* top: 5px; */
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: bold;
}
.discounts_text_two {
  transform: scale(0.83, 0.83);
  position: absolute;
  left: -10px;
  top: 20px;
}

.discounts_btn {
  width: 75px;
  height: 24px;
  line-height: 24px;
  background-color: #fff;
  border-radius: 12px;
  font-size: 12px;
  color: #fb6e1e;
  font-weight: bold;
  margin-bottom: 29px;
  margin-left: 10px;
}
.city {
  font-size: 12px;
  position: absolute;
  bottom: -4px;
  left: 20px;
  color: #999;
}
.letter {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 3px;
  transform: scale(0.83, 0.83);
}
.deadline {
  font-size: 12px;
  position: absolute;
  bottom: 6px;
  right: 15px;
  color: #999;
  transform: scale(0.83, 0.83);
}
/* 未使用  END*/

/* 已使用 */
.used_img_box {
  text-align: center;
  background-image: url("../images/huise.png");
  background-repeat: no-repeat;
  background-size: 320px;
  width: 320px;
  height: 100px;
  box-shadow: 2px 2px 10px #e2e2e2;
  /* margin-left: 28px; */
  margin-top: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
}
.used_conform {
  font-size: 22px;
  font-weight: 700;
  margin-left: 15px;
  margin-bottom: 30px;
}
.used_num {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 32px;
}
.used_discounts_text {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  position: relative;
  margin-bottom: 40px;
  margin-left: 5px;
}

.used_discounts_text_one {
  /* position: absolute; */
  /* top: 5px; */
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: bold;
}
.used_discounts_text_two {
  transform: scale(0.83, 0.83);
  position: absolute;
  left: -10px;
  top: 20px;
}

.used_discounts_btn {
  width: 75px;
  height: 24px;
  line-height: 24px;
  background-color: #fff;
  border-radius: 12px;
  font-size: 12px;
  color: #999;
  font-weight: bold;
  margin-bottom: 29px;
  margin-left: 10px;
}
.used_city {
  font-size: 12px;
  position: absolute;
  bottom: -4px;
  left: 20px;
  color: #999;
}
.used_letter {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 3px;
  transform: scale(0.83, 0.83);
}
.used_deadline {
  font-size: 12px;
  position: absolute;
  bottom: 6px;
  right: 15px;
  color: #999;
  transform: scale(0.83, 0.83);
}
/* 已使用 END */
</style>
